<script setup>
import Form from '@/components/common/form.vue'
import Table from '@/components/common/table.vue'
import TitleHeader from '@/components/common/titleHeader.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
// 表单数据
const formData = ref({
  nickName: '',
  role: '',
  status: '',
  mond: ''
})
const formModel = [
  {
    prop: 'nickName',
    label: '用户名称',
    type: 'input'
  },
  {
    prop: 'role',
    label: '角色',
    type: 'input'
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '启用', value: '启用' },
      { label: '禁用', value: '禁用' }
    ]
  },
  {
    prop: 'mond',
    label: '单位',
    type: 'input'
  },
  {
    name: '查询',
    type: 'button',
    btnType: '',
    prop: 'query'
  },
  {
    name: '新增',
    type: 'button',
    btnType: 'info',
    prop: 'add'
  },
  {
    name: '导入',
    type: 'button',
    btnType: 'info',
    prop: 'import'
  },
  {
    name: '导出',
    type: 'button',
    btnType: 'info',
    prop: 'output'
  },
  {
    name: '重置密码',
    type: 'button',
    btnType: 'info',
    prop: 'resetPassword'
  }
]
// 表单点击事件
function handleForm(type, data) {
  console.log(type, data)
  switch (type) {
    case 'add':
    router.push({
      path:'/userAdd',
      query:{
        data:JSON.stringify(data)
      }
    })
      break;
    default:
      break;
  }
}
// 列表数据
const tableData = [
  {
    name: '张天',
    sex: '男',
    phone: '1531208809',
    units: '信息工程学院',
    role: '',
    status: '启用',
    remark: ''
  }
]
const columns = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'phone',
    label: '手机号'
  },
  {
    prop: 'units',
    label: '单位'
  },
  {
    prop: 'role',
    label: '角色'
  },
  {
    prop: 'status',
    label: '状态'
  },
  {
    prop: 'remark',
    label: '备注'
  }
]
const options = [
  {
    label: '编辑',
    type: 'primary',
    prop: 'edit'
  },
  {
    label: '删除',
    type: 'info',
    prop: 'delete'
  }
]

//表格的操作点击事件
function handleTable(detail, type) {
  console.log(detail, type)
}
</script>

<template>
  <div class="user-wrapper">
    <TitleHeader></TitleHeader>
    <div class="user-content">
      <Form :data="formData" :formOpt="formModel" @handleForm="handleForm"></Form>
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="用户编号" width="150" />
        </template>
      </Table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  .user-content {
    width: calc(100% - 100px);
    padding: 30px 50px;
    text-align: left;
    overflow: hidden;
  }
}
</style>
